<template>
    <el-dialog v-model="visible" :title="title" :width="width" :before-close="cancelUpdate" @close="resetForm" @open="init">
        <el-transfer
            v-model="assignedRoles"
            :props="{
              key: 'value',
              label: 'label'
            }"
            :titles="['未拥有的权限','已拥有的权限']"
            :data="roleList"
        />
        <template #footer>
            <el-button type="default" @click="cancelUpdate">取消</el-button>
            <el-button type="primary" @click="submitUpdate">确认</el-button>
        </template>
    </el-dialog>
</template>

<script>
import {ElMessage} from "element-plus";
import {getAssignRoleList} from "../../../network/sys/role";
import {updateEmpRoles} from "../../../network/sys/emp-role";

export default {
    name: "AssignRoleForm",
    emits:['refresh-data'],
    props:{
        width: ''
    },
    data(){
        return{
            type: 0,//0为添加表单，1为修改表单
            title: '',//表单名称
            visible: false,//是否展示
            obj: {
                id: null,
                empName: null
            },
            roleList: [],
            assignedRoles: []
        }
    },
    methods:{
        submitUpdate(){
            if(!this.checkFormParams()){
                ElMessage.error('账户验证失败');
                return;
            }
            this.$operate.confirm({
                title: '修改员工权限',
                hint: '请确定是否保存当前修改？',
                executeFn: ()=>{
                    // this.visible = false;
                    updateEmpRoles({
                        empId: this.obj.id,
                        roleIds: this.assignedRoles
                    }).then(vo=>{
                        this.$response.handle({
                            data: vo,
                            success: '修改成功',
                            error: '修改失败',
                            successFn: ()=>{
                                this.visible = false;
                            },
                            log: '修改员工角色权限结果'
                        })
                    })
                }
            })
        },
        cancelUpdate(done){
            this.$operate.confirm({
                title: '修改权限',
                hint: '您确定要取消修改吗？',
                executeFn: ()=>{
                    done();
                }
            })
        },
        resetForm(){
            Object.assign(this.$data, this.$options.data.call(this));
        },
        checkFormParams(){
            return true;
        },
        loadAssignRoles(){
            getAssignRoleList(this.obj.id).then(vo=>{
                this.$response.handle({
                    data: vo,
                    successFn: ()=>{
                        this.roleList = vo.data.roleList;
                        this.assignedRoles = vo.data.assignedRoles;
                    },
                    log: '员工分配角色列表'
                })
            })
        },
        init(){
            this.loadAssignRoles();
        }
    },
    created() {
        this.init();
    }
}
</script>

<style scoped>
.el-select-dropdown__item{
    width: 100%;
}
.el-cascader-node{
    width: 100%;
}
.explain{
    font-size: 12px;
    color: #a1a1a1;
}
</style>
<style>
.el-cascader-node{
    width: 100%;
}
.el-scrollbar__view{
    width: 180px;
}
</style>